<template>
  <view class="app-page">
    <view v-if="info.contractState == 0" class="status">
      <image
        class="file-status-icon"
        mode="scaleToFill"
        src="@/static/images/waiting.png"
      />
      <view class="title" style="color: #ffb800"> 借条填写中 </view>
    </view>
    <view v-else-if="info.contractState == 1" class="status">
      <image
        class="file-status-icon"
        mode="scaleToFill"
        src="@/static/images/editing.png"
      />
      <view class="title" style="color: #1677ff"> 借条签署中 </view>
    </view>
    <view v-else-if="info.contractState == 2" class="status">
      <image
        class="file-status-icon"
        mode="scaleToFill"
        src="@/static/images/sin.png"
      />
      <view class="title" style="color: #4edb94"> 借条已生效 </view>
    </view>
    <view v-else-if="info.contractState == 3" class="status">
      <image
        class="file-status-icon"
        mode="scaleToFill"
        src="@/static/images/return.png"
      />
      <view class="title" style="color: #999999"> 借条已撤回 </view>
      <view class="tip">
        {{ info.withdrawalReason ? `撤回原因:${info.withdrawalReason}` : "" }}
      </view>
    </view>
    <view v-else-if="info.contractState == 4" class="status">
      <image
        class="file-status-icon"
        mode="scaleToFill"
        src="@/static/images/resuce.png"
      />
      <view class="title" style="color: #999999"> 借条已拒签 </view>
      <view class="tip">{{
        info.refusalReason ? `拒签原因:${info.refusalReason}` : ""
      }}</view>
      <!--<view class="tip">
      {{info.refusedMemberId == info.creditorMember?'出借人':'借款人'}}拒绝签署</view> -->
    </view>
    <view
      v-else-if="info.contractState == 5"
      class="status"
      style="color: #999999"
    >
      <image
        class="file-status-icon"
        mode="scaleToFill"
        src="@/static/images/fail.png"
      />
      <view class="title"> 借条已失效 </view>
      <view class="tip">{{
        info.expirationReason ? info.expirationReason : ""
      }}</view>
    </view>
    <view class="file-amount">
      借款金额:
      <view class="price">
        {{ info.loanAmount ? info.loanAmount : 0.0 }}
      </view>
    </view>
    <view class="user">
      <view class="item name">
        <view class="label">出借人:</view>
        <view class="value">{{ info.creditorMemberName || "待对方授权" }}</view>
      </view>
      <view class="item tel">
        <view class="label">手机号:</view>
        <view class="value">{{
          info.creditorMemberPhone || "待对方授权"
        }}</view>
      </view>
      <view class="item idNo">
        <view class="label">身份证号码:</view>
        <view class="value">{{
          info.creditorMemberIdNumber || "待对方授权"
        }}</view>
      </view>
      <view class="tag"> 出 </view>
    </view>
    <view class="user">
      <view class="item name">
        <view class="label">借款人:</view>
        <view class="value">{{ info.debtorMemberName || "待对方授权" }}</view>
      </view>
      <view class="item tel">
        <view class="label">手机号:</view>
        <view class="value">{{ info.debtorMemberPhone || "待对方授权" }}</view>
      </view>
      <view class="item idNo">
        <view class="label">身份证号码:</view>
        <view class="value">{{
          info.debtorMemberIdNumber || "待对方授权"
        }}</view>
      </view>
      <view class="tag tag-jie"> 借 </view>
    </view>
    <view class="user">
      <view class="item">
        <view class="label">借款期间:</view>
        <view class="value"
          >{{ info.debtorTime }} 至 {{ info.repaymentTime }}</view
        >
      </view>
      <view class="item">
        <view class="label">借款事由:</view>
        <view class="value">{{ info.borrowingReason }}</view>
      </view>
    </view>
    <view class="user">
      <view class="item">
        <view class="label">利息:</view>
        <view class="value"
          >{{ (info.contractInterest / 100).toFixed(2) }}元</view
        >
      </view>
      <view class="item">
        <view class="label">逾期利率:</view>
        <view class="value">{{ info.timeInterest }}%</view>
      </view>
    </view>
    <view class="user">
      <view class="item">
        <view class="label">备注说明:</view>
        <view class="value">{{ info.contractRemarks || "-" }}</view>
      </view>
    </view>
    <view class="user">
      <view class="item payway">
        <view class="label">支付方式:</view>
        <view class="value" style="display: flex; flex: 1">
          <!-- {{ info.transferStatus==1?'借款已支付':  info.paymentType==0?'支付宝':'其他'}} -->
          {{
            info.paymentType == 0
              ? "支付宝"
              : info.paymentType == 2
              ? "其他方式转账"
              : "借款已支付"
          }}

          <view
            v-if="
              roleType == 0 && info.contractState == 2 && !info.paymentVoucher
            "
            style="flex: 1; text-align: right"
          >
            <!-- <text
            v-if="{{ info.paymentType == 0 && info.transferStatus == 0}}"
            onTap="handleGoTransfer"
          >
            去转账
          </text> -->
            <text onTap="handleOpenPayway" style="margin-left: 24rpx"
              >修改转账方式</text
            >
          </view>
        </view>
      </view>
    </view>
    <view class="user">
      <view class="item">
        <view class="label">管辖法院:</view>
        <view class="value">{{ info.courtAddress || "-" }}</view>
      </view>
      <view class="item">
        <view class="label">借款人地址:</view>
        <view class="value">{{ info.debtorMemberAddress || "-" }}</view>
      </view>
    </view>
    <view class="cardID">
      <view class="card-item">
        <view class="card-item-title"> 出借人身份证 </view>
        <view class="card-item-row">
          <image
            class="card-item-image"
            mode="aspectFit"
            :data-urls="[
              info.creditorMemberIdNumberFront,
              info.creditorMemberIdNumberBack,
            ]"
            :data-index="0"
            default-source="@/static/images/ID-front.png"
            :src="info.creditorMemberIdNumberFront"
            @click="onViewImage"
          />
          <image
            class="card-item-image"
            mode="aspectFit"
            :data-urls="[
              info.creditorMemberIdNumberFront,
              info.creditorMemberIdNumberBack,
            ]"
            :data-index="1"
            default-source="@/static/images/ID-back.png"
            :src="info.creditorMemberIdNumberBack"
            @click="onViewImage"
          />
        </view>
      </view>
      <view class="card-item">
        <view class="card-item-title"> 借款人身份证 </view>
        <view class="card-item-row">
          <image
            class="card-item-image"
            mode="aspectFit"
            default-source="@/static/images/ID-front.png"
            :data-urls="[
              info.debtorMemberIdNumberFront,
              info.debtorMemberIdNumberBack,
            ]"
            :data-index="0"
            :src="info.debtorMemberIdNumberFront"
            @click="onViewImage"
          />
          <image
            class="card-item-image"
            mode="aspectFit"
            :data-urls="[
              info.debtorMemberIdNumberFront,
              info.debtorMemberIdNumberBack,
            ]"
            :data-index="1"
            default-source="@/static/images/ID-back.png"
            :src="info.debtorMemberIdNumberBack"
            @click="onViewImage"
          />
        </view>
      </view>
      <view v-if="info.contractAnnex" class="card-item">
        <view class="card-item-title"> 其他材料 </view>
        <view class="card-item-row">
          <image
            v-for="(item, index) in info.contractAnnex.split(',')"
            :key="index"
            class="card-item-image2"
            :data-urls="info.contractAnnex.split(',')"
            :data-index="index"
            mode="aspectFit"
            :src="item"
            @click="onViewImage"
          />
        </view>
      </view>
    </view>
    <view
      v-if="
        info.contractState == 0 &&
        (userInfo.memberId == info.debtorMember ||
          userInfo.memberId == info.creditorMember)
      "
      class="footer"
    >
      <button
        :data-contractId="info.contractId"
        @click="handleReturn"
        type="default"
        inline
        className="round-btn"
      >
        撤回
      </button>
      <button
        v-if="
          info.promoterType == 0 ||
          (info.promoterType == 1 && info.memberSignPackageId)
        "
        type="default"
        :data-contractId="info.contractId"
        inline
        open-type="share"
        className="round-btn"
      >
        分享
      </button>
      <button
        v-if="
          userInfo.memberId == info.promoterUserId &&
          info.promoterUserId == info.debtorMember &&
          !info.memberSignPackageId
        "
        type="default"
        :data-contractId="info.contractId"
        inline
        className="round-btn"
        @click="handlePay"
      >
        支付
      </button>
    </view>
    <view
      v-else-if="
        info.contractState == 1 &&
        (userInfo.memberId == info.debtorMember ||
          userInfo.memberId == info.creditorMember)
      "
      class="footer"
    >
      <button
        v-if="info.promoterUserId == userInfo.memberId"
        :data-contractId="info.contractId"
        @click="handleReturn"
        type="default"
        inline
        className="round-btn"
      >
        撤回
      </button>
      <button
        data-contractId="{{info.contractId}}"
        open-type="share"
        type="default"
        inline
        className="round-btn"
      >
        分享
      </button>
      <button
        v-if="
          userInfo.memberId != info.promoterUserId &&
          (roleType == 0
            ? !info.creditorMemberSignatureId
            : !info.debtorMemberSignatureId)
        "
        @click-contractId="
          {
            {
              info.contractId;
            }
          }
        "
        catchTap="handleRefuse"
        type="default"
        inline
        className="round-btn"
      >
        拒绝签署
      </button>
      <button
        v-if="
          (userInfo.memberId == info.creditorMember &&
            !info.creditorMemberSignatureId) ||
          (userInfo.memberId == info.debtorMember &&
            !info.debtorMemberSignatureId)
        "
        :data-contractId="info.contractId"
        @click="handleGoSign"
        type="default"
        inline
        className="round-btn"
      >
        签署
      </button>
    </view>
    <view
      v-else-if="
        info.contractState === 2 &&
        (userInfo.memberId == info.debtorMember ||
          userInfo.memberId == info.creditorMember)
      "
      class="footer"
    >
      <button
        :data-contractUrl="info.contractUrl"
        @click="handleViewFile"
        type="default"
        inline
        className="round-btn"
      >
        查看合同
      </button>
      <button
        :data-contractUrl="info.contractUrl"
        @click="handleDownload"
        type="default"
        inline
        className="round-btn"
      >
        下载
      </button>
      <button
        :data-contractId="info.contractId"
        type="default"
        open-type="share"
        inline
        className="round-btn"
      >
        分享
      </button>
    </view>
    <view
      v-else-if="
        info.contractState == 3 &&
        (userInfo.memberId == info.debtorMember ||
          userInfo.memberId == info.creditorMember)
      "
      class="footer"
    >
      <button
        v-if="info.promoterUserId == userInfo.memberId"
        :data-contractId="info.contractId"
        data-promoterType="info.promoterType"
        @click="handleReSend"
        type="default"
        inline
        className="round-btn"
      >
        重新发起
      </button>
      <button
        v-if="info.withdrawalReason"
        :data-contractId="info.contractId"
        :data-reason="info.withdrawalReason"
        data-state="3"
        @click="handleViewReason"
        type="default"
        inline
        className="round-btn"
      >
        查看原因
      </button>
      <button
        :data-contractId="info.contractId"
        @click="handleDel"
        type="default"
        inline
        className="round-btn"
      >
        删除
      </button>
    </view>
    <view
      v-else-if="
        info.contractState == 4 &&
        (userInfo.memberId == info.debtorMember ||
          userInfo.memberId == info.creditorMember)
      "
      class="footer"
    >
      <button
        v-if="info.refusalReason"
        type="default"
        inline
        className="round-btn"
        :data-reason="info.refusalReason"
        data-state="4"
        @click="handleViewReason"
      >
        查看原因
      </button>
      <button
        data-contractId="info.contractId"
        @click="handleDel"
        type="default"
        inline
        className="round-btn"
      >
        删除
      </button>
      <button
        v-if="info.promoterUserId == userInfo.memberId"
        :data-contractId="info.contractId"
        :data-promoterType="info.promoterType"
        @click="handleReSend"
        type="default"
        inline
        className="round-btn"
      >
        重新发起
      </button>
    </view>
    <view
      v-else-if="
        info.contractState == 5 &&
        (userInfo.memberId == info.debtorMember ||
          userInfo.memberId == info.creditorMember)
      "
      class="footer"
    >
      <button
        v-if="info.promoterUserId == userInfo.memberId"
        type="default"
        :data-contractUrl="info.contractUrl"
        @click="handleDownload"
        inline
        className="round-btn"
      >
        下载
      </button>
      <button
        v-if="info.promoterUserId == userInfo.memberId"
        :data-contractId="info.contractId"
        open-type="share"
        type="default"
        inline
        className="round-btn"
      >
        分享
      </button>
      <button
        v-if="info.promoterUserId != userInfo.memberId"
        :data-reason="info.expirationReason"
        data-state="5"
        @click="handleViewReason"
        type="default"
        inline
        className="round-btn"
      >
        查看原因
      </button>
      <button
        v-if="info.promoterUserId != userInfo.memberId"
        data-contractId="info.contractId"
        @click="handleDel"
        type="default"
        inline
        className="round-btn"
      >
        删除
      </button>
    </view>
    <view a:else class="footer">
      <button
        v-if="info.contractUrl"
        :data-contractUrl="info.contractUrl"
        @click="handleViewFile"
        type="default"
        inline
        className="round-btn"
      >
        查看合同
      </button>
    </view>
    <!-- 利息提示弹层 -->
    <uni-popup
      class="transfer-popup"
      ref="transferRefs"
      visible="{{ transferShow }}"
      type="bottom"
      @close="handleTransferClose"
    >
      <view class="safe-area transfer-content">
        <uni-icons
          class="transfer-close"
          type="CloseOutline"
          @click="handleTransferClose"
        >
        </uni-icons>
        <view class="transfer-title">
          签鸽电子借条用户使用通知
          <!-- {{articleInfo.title}} -->
        </view>
        <view class="li"> ·本次转账会为你填入借款人身份信息与借款金。 </view>
        <view class="li">
          ·当支付宝检测后判定交易存在风险时，会提示交易失败，可点击下方[支付宝转账告知，查看解决方案]
        </view>
        <view class="transfer-notice" @click="onViewNotice">
          支付宝转账告知
        </view>
        <button @click="AliTransferNotice" type="primary" class="transfer-btn">
          去转账
        </button>
      </view>
    </uni-popup>
    <!-- 利息弹层 -->
    <!-- 修改转账方式弹层 -->
    <change-payway ref="payWayRefs" onChange="handlePayWayChange" />
    <!-- 修改转账方式弹层 -->
    <!-- 购买签署流量弹层 -->
    <pay-flow ref="payFlowRefs" onPay="handlePayFlow" />
    <!-- 购买签署流量弹层 -->
    <modal-input ref="modalInputRefs" onSubmit="handleModalSubmit" />
  </view>
</template>

<script>
import { toThousandFilter } from "@/utils/common";
import {
  apiContractById,
  apiUpdateContract,
  apiExpiringSoonOne,
  apiMemberSignPackagePay,
  apiDelete,
  apiRefused,
  apiWithDrawn,
  apiArticleById,
} from "@/api/common";
import code2Enum from "@/utils/code2Enum";
export default {
  components: {},
  data() {
    return {
      transferShow: false,
      contractId: "",
      userInfo: {},
      articleInfo: {
        title: "",
        content: "",
        id: "",
      },
    };
  },
  onShareAppMessage() {
    // 返回自定义分享信息
    const { contractId, roleType } = this.data;

    return new Promise((resolve, reject) => {
      apiContractById({
        contractId: contractId,
      }).then((res) => {
        if (res.code === 200) {
          res.data = {
            ...res.data,
            contractState: code2Enum.contractStateEnum(res.data.contractState),
            promoterType: code2Enum.promoterTypeEnum(res.data.promoterType),
            contractPayState: code2Enum.contractPayStateEnum(
              res.data.contractPayState
            ),
            paymentType: code2Enum.paymentTypeEnum(res.data.paymentType),
            transferStatus: code2Enum.transferStatusEnum(
              res.data.transferStatus
            ),
          };
          const { contractState } = res.data;
          // 合同未生效
          if (contractState === 0 || contractState === 1) {
            resolve({
              title: "签鸽小程序",
              desc: "邀请您签署借条",
              bgImgUrl:
                "https://jianshang-qiange-daily.oss-cn-beijing.aliyuncs.com/36b4e2b87cdf450cb93787d38d69a439.jpg",

              path: `pages/pleaseSign/pleaseSign?contractId=${contractId}`,
            });
          } else {
            // 合同生效  分享预览同第三方
            resolve({
              title: "签鸽小程序",
              desc: "邀请您签署借条",
              bgImgUrl:
                "https://jianshang-qiange-daily.oss-cn-beijing.aliyuncs.com/36b4e2b87cdf450cb93787d38d69a439.jpg",

              path: `pages/borrowFile/borrowFile?contractId=${contractId}&roleType=2&mode=second`,
            });
          }
        }
      });
    });
  },
  onLoad(query) {
    this.getArticle();
    const { contractId } = query;
    this.contractId = contractId;
    this.userInfo = this.$store.state.userInfo;
    this.$nextTick(() => {
      this.getData();
    });
  },
  onPullDownRefresh() {
    my.showLoading();
    this.getData();
  },
  methods: {
    getData() {
      const { contractId } = this;
      apiContractById({
        contractId: contractId,
      })
        .then((res) => {
          uni.hideLoading();
          uni.stopPullDownRefresh();
          if (res.code === 200) {
            res.data = {
              ...res.data,
              loanAmount: toThousandFilter(
                (res.data.loanAmount / 100).toFixed(2)
              ),
              contractState: code2Enum.contractStateEnum(
                res.data.contractState
              ),
              promoterType: code2Enum.promoterTypeEnum(res.data.promoterType),
              contractPayState: code2Enum.contractPayStateEnum(
                res.data.contractPayState
              ),
              paymentType: code2Enum.paymentTypeEnum(res.data.paymentType),
              transferStatus: code2Enum.transferStatusEnum(
                res.data.transferStatus
              ),
            };
            const { creditorMember, debtorMember } = res.data;
            const memberId = this.$store.state.userInfo.memberId;
            this.info = {
              ...res.data,
              promoterUserId:
                res.data.promoterType == 0
                  ? res.data.creditorMember
                  : res.data.debtorMember,
            };
            this.roleType =
              memberId === creditorMember
                ? 0
                : memberId === debtorMember
                ? 1
                : 2; //0 出借 1 借款 2 其他
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.stopPullDownRefresh();
        });
    },
    getArticle() {
      apiArticleById({ articleIdList: 4 }).then((res) => {
        if (res.code === 200 && res.data && res.data.length > 0) {
          this.articleInfo = {
            id: 4,
            title: res.data[0].articleTitle,
            content: res.data[0].articleDetails,
          };
        }
      });
    },
    onViewNotice() {
      uni.navigateTo({
        url: "/pages/article/article?type=serviceAgree&id=4",
      });
    },
    // 去转账
    AliTransferNotice() {},

    // 支付
    handlePay(e) {
      const _this = this;
      const { contractId } = _this;
      apiContractById({
        contractId: contractId,
      }).then((res) => {
        if (res.code === 200) {
          res.data = {
            ...res.data,
            contractState: code2Enum.contractStateEnum(res.data.contractState),
            promoterType: code2Enum.promoterTypeEnum(res.data.promoterType),
            contractPayState: code2Enum.contractPayStateEnum(
              res.data.contractPayState
            ),
            paymentType: code2Enum.paymentTypeEnum(res.data.paymentType),
            transferStatus: code2Enum.transferStatusEnum(
              res.data.transferStatus
            ),
          };
          const { memberSignPackageId, contractState } = res.data;
          if (contractState === 0 && !memberSignPackageId) {
            // 是否剩余流量包
            apiExpiringSoonOne().then((response) => {
              if (response.code === 200) {
                const hasPackageId = response.data
                  ? response.data.memberSignPackageId
                  : null;
                if (hasPackageId) {
                  uni.showModal({
                    title: "提示",
                    content: "是否使用流量包支付？",
                    cancelText: "取消",
                    cancelColor: "#333",
                    confirmText: "确认",
                    showCancel: true,
                    success: function (result) {
                      console.log(result, "result");
                      if (result.confirm) {
                        // 调用支付接口
                        apiMemberSignPackagePay({
                          contactInfoId: contractId,
                          memberSignPackageId: hasPackageId,
                        }).then((res2) => {
                          if (res2.code === 200) {
                            uni.showToast({
                              content: "借条支付成功",
                              mask: true,
                              duration: 2000,
                            });
                            _this.getData();
                          } else {
                            uni.showToast({
                              content: res2.msg,
                              mask: true,
                            });
                          }
                        });
                      } else {
                      }
                    },
                    fail: function (err) {
                      console.log(err);
                    },
                  });
                } else {
                  // 没有剩余流量包 唤起支付购买
                  // my.showToast({
                  //   content: '余额不足，请充值',
                  //   icon: 'none',
                  //   duration: 2000
                  // })
                  // setTimeout(() => {
                  _this.$refs.payFlowRefs.handleOpen();
                  // }, 2000)
                }
              }
            });
          } else {
            _this.getData();
          }
        }
      });
    },
    // 立即购买流量--借款人调用
    async handlePayFlow() {
      const _this = this;
      _this.$refs.payFlowRefs.handleClose();
      const { contractId } = _this;
      // 支付合同后
      apiExpiringSoonOne().then((response) => {
        if (response.code === 200) {
          const memberSignPackageId = response.data
            ? response.data.memberSignPackageId
            : null;
          apiMemberSignPackagePay({
            contactInfoId: contractId,
            memberSignPackageId,
          }).then((res2) => {
            if (res2.code === 200) {
              uni.showToast({
                content: "借条支付成功",
                mask: true,
                duration: 2000,
              });
              _this.getData();
            } else {
              uni.showToast({
                content: res2.msg,
                mask: true,
              });
            }
          });
        }
      });
    },
    // 切换支付方式
    handlePayWayChange(paymentType) {
      const { contractId } = this.data;
      apiUpdateContract({
        contractId: contractId,
        paymentType,
      }).then((res) => {
        if (res.code === 200) {
          uni.showToast({
            content: "修改支付方式成功",
            mask: true,
            duration: 2000,
          });
          // setTimeout(() => {
          this.getData();
          // }, 2000)
        }
      });
    },
    // 打开支付方式选择窗
    handleOpenPayway() {
      this.$refs.payWayRefs.open(this.info.paymentType);
    },
    // 去转账
    handleGoTransfer() {
      this.$refs.transferRefs.open();
    },
    // 展示、关闭用户使用通知
    handleTransferClose() {
      this.$refs.payWayRefs.close();
    },
    //  图片预览
    onViewImage(e) {
      const { index, urls } = e.target.dataset;
      const leng = urls.filter((item) => item).length;
      if (leng) {
        uni.previewImage({
          enablesavephoto: true,
          enableShowPhotoDownload: true,
          urls,
          current: index,
        });
      }
    },
    // 查看合同详情
    handleViewFile() {
      const { roleType, contractId } = this;
      uni.navigateTo({
        url: `/pages/borrowFile/borrowFile?contractId=${contractId}`,
      });
    },

    // 撤回
    handleReturn(e) {
      const _this = this;
      const { contractId } = e.target.dataset;
      _this.$refs.modalInputRefs.onOpen({
        title: "撤回",
        params: {
          contractId,
        },
        type: "return",
      });
    },
    // 拒绝
    handleRefuse(e) {
      const _this = this;
      const { contractId } = e.target.dataset;
      _this.$refs.modalInputRefs.onOpen({
        title: "拒签",
        params: {
          contractId,
        },
        type: "refuse",
      });
    },
    handleModalSubmit(option) {
      const _this = this;
      const { type, content, ...params } = option;
      console.log(type, params);
      if (type === "refuse") {
        apiRefused({
          ...params,
          refusalReason: content,
        })
          .then((res) => {
            if (res.code === 200) {
              uni.showToast({
                content: res.msg,
                mask: true,
              });
              _this.getData();
            }
          })
          .catch((err) => {
            if (err.code == 600) {
              _this.getData();
            }
          });
      } else if (type === "return") {
        apiWithDrawn({
          withdrawalReason: content,
          ...params,
        })
          .then((res) => {
            if (res.code === 200) {
              uni.showToast({
                content: res.msg,
                mask: true,
              });
              _this.getData();
            }
          })
          .catch((err) => {
            if (err.code == 600) {
              _this.getData();
            }
          });
      }
    },

    // 去签署
    handleGoSign(e) {
      const { contractId } = e.target.dataset;
      uni.navigateTo({
        url: `/pages/borrowFile/borrowFile?contractId=${contractId}`,
      });
    },
    // 下载
    handleDownload(e) {
      const { contractUrl } = e.target.dataset;
      uni.downloadFile({
        url: contractUrl,
        success(res) {
          // #ifdef MP-ALIPAY
          // 基础库 2.7.23 开始支持返回 tempFilePath
          if (my.canIUse("downloadFile.return.tempFilePath")) {
            // 基础库 2.8.2 客户端 10.3.10 开始支持
            if (my.canIUse("saveFileToDisk")) {
              my.saveFileToDisk({
                filePath: res.tempFilePath,
                success(res) {
                  console.log(res);
                },
                fail(err) {
                  console.error(err);
                },
              });
            }
          }
          // #endif
          // #ifdef MP-WEIXIN
          // 基础库 2.8.2 客户端 10.3.10 开始支持
          uni.saveFile({
            tempFilePath: res.tempFilePath,
            success(res) {
              console.log(res);
            },
            fail(err) {
              console.error(err);
            },
          });
          // #endif
        },
        fail(error) {
          console.error("下载失败: ", JSON.stringify(error));
        },
      });
    },
    // 查看原因
    handleViewReason(e) {
      const { reason, state } = e.target.dataset;
      uni.showModal({
        title: state == 3 ? "撤回原因" : state == 4 ? "拒签原因" : "失效原因",
        content: reason || "后台不给反原因",
        buttonText: "我知道了",
        showCancel: false,
        success: () => {},
      });
    },
    // 删除
    handleDel(e) {
      const _this = this;
      const { contractId } = e.target.dataset;
      uni.showModal({
        title: "提示",
        content: "确认删除该借条吗？",
        cancelText: "取消",
        cancelColor: "#333",
        confirmText: "确认",
        showCancel: true,
        success: function (result) {
          console.log(result, "result");
          if (result.confirm) {
            apiDelete([contractId])
              .then((res) => {
                if (res.code == 200) {
                  uni.showToast({
                    content: res.msg,
                    mask: true,
                  });
                  uni.reLaunch({
                    url: "/pages/order/index",
                  });
                }
              })
              .catch((err) => {
                if (err.code == 600) {
                  _this.getData();
                }
              });
          }
        },
      });
    },

    // 重新发起
    handleReSend(e) {
      const _this = this;
      const { contractId, promoterType } = e.target.dataset;
      try {
        uni.showModal({
          title: "提示",
          content: "确认重新发起该借条吗？",
          cancelText: "取消",
          cancelColor: "#333",
          confirmText: "确认",
          showCancel: true,
          success: function (result) {
            console.log(result, "result");
            if (result.confirm) {
              // 奖合同信息带到create页面  重新发起一个新的合同
              const roleType = promoterType;
              uni.navigateTo({
                url: `/pages/create/index?roleType=${roleType}&contractId=${contractId}&mode=relaunch`,
              });
              // return false
              // // 对现有合同重新发起

              // apiRelaunch({
              //   contractId
              // }).then(res => {
              //   if (res.code === 200) {
              //     my.showToast({
              //       content: res.msg,
              //       mask: true
              //     })
              //     _this.handleTabsChange(_this.data.current)
              //   }
              // })
            }
          },
          fail() {},
        });
      } catch (error) {
        // 奖合同信息带到create页面  重新发起一个新的合同
        const roleType = promoterType;
        uni.navigateTo({
          url: `/pages/create/index?roleType=${roleType}&contractId=${contractId}&mode=relaunch`,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.app-page {
  width: 100vw;
  min-height: 100vh;
  overflow-y: auto;
  position: relative;
  background-color: #f5f5f5;
  padding-bottom: 250rpx;
  padding-top: 228rpx;
}

.app-page::before {
  width: 100%;
  height: 503rpx;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(180deg, #94cefd 0%, #cae7ff 46%, #eef7ff 100%);
}

.app-page::after {
  width: 253rpx;
  height: 253rpx;
  content: "";
  background-image: url(../../images/borrowDetail.png);
  background-size: contain;
  position: absolute;
  right: 0;
  top: 88px;
}

.status {
  /* height: 80rpx; */
  font-size: 36rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  color: #333333;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
  margin: 0 0 24rpx 24rpx;
  box-sizing: border-box;
}

.status .file-status-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 16rpx;
}

.status .title {
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 36rpx;
  color: #333333;
  line-height: 50rpx;
  text-align: left;
  font-style: normal;
}

.status .tip {
  width: 100%;
  display: block;
  min-height: 30rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #999999;
  line-height: 30rpx;
  text-align: left;
  font-style: normal;
  padding-left: 64rpx;
  box-sizing: border-box;
}

.file-amount {
  width: 503rpx;
  height: 90rpx;
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  color: #000000;
  line-height: 90rpx;
  background: linear-gradient(90deg, #fbfdff 0%, #ecf4fa 100%);
  border-radius: 16rpx;
  padding-left: 24rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  margin-left: 24rpx;
  display: flex;
  align-items: center;
}

.file-amount .price {
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  color: #ff3141;
  line-height: 90rpx;
  margin-left: 10rpx;
}

.user {
  width: 702rpx;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border-radius: 16rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  margin: 24rpx auto 24rpx;
}

.user .item {
  display: flex;
  /* align-items: center; */
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.user .tag {
  width: 64rpx;
  height: 64rpx;
  background: #1677ff;
  border-radius: 90rpx;
  opacity: 0.8;
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  color: #ffffff;
  line-height: 64rpx;
  text-align: center;
  position: absolute;
  top: 24rpx;
  right: 24rpx;
}

.user .tag-jie {
  width: 64rpx;
  height: 64rpx;
  background: #3dcfa4;
  border-radius: 90rpx;
  opacity: 0.8;
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  color: #ffffff;
  line-height: 64rpx;
  text-align: center;
}

.user .item:last-child {
  border: 0;
}

.item .label {
  width: 180rpx;
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  color: #999999;
  line-height: 42rpx;
}

.item .value {
  flex: 1;
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  color: #333333;
  line-height: 42rpx;
  text-align: justify;
  word-break: break-all;
}

.item .value text {
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #1677ff;
}

.cardID {
  width: 702rpx;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border-radius: 8rpx;
  padding: 24rpx;
  box-sizing: border-box;
  margin: auto;
}

.cardID .card-item {
  margin-bottom: 32rpx;
}

.cardID .card-item:last-child {
  margin-bottom: 0;
}

.cardID .card-item-title {
  height: 42rpx;
  font-family: PingFangSC, PingFang SC;
  font-size: 30rpx;
  color: #999999;
  line-height: 42rpx;
  margin-bottom: 32rpx;
}

.card-item-row {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.card-item-image {
  width: 303rpx;
  height: 182rpx;
  margin-right: 48rpx;
}

.card-item-image:last-child {
  margin-right: 0;
}

.card-item-image2 {
  width: 160rpx;
  height: 240rpx;
  border-radius: 8rpx;
  margin-right: 32rpx;
}

/* 底部按钮 */
.footer {
  width: 100%;
  background-color: #fff;
  padding: 24rpx 24rpx 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  z-index: 3;
  left: 0;
  bottom: 0;
  padding-bottom: 0px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.footer .round-btn {
  width: 168rpx;
  height: 58rpx;
  font-family: PingFangSC, PingFang SC;
  font-size: 26rpx;
  color: #1677ff;
  line-height: 56rpx;
  background: #ffffff;
  border-radius: 32rpx;
  border: 1rpx solid #1677ff;
  margin-left: 24rpx;
  margin-bottom: 24rpx;
}

/* 底部按钮 */

/* 借条用户使用通知 */
.transfer-content {
  width: 100vw;
  padding: 0 24rpx 0;
  box-sizing: border-box;
}
.notice-view {
  width: 100vw;
  padding: 24rpx 24rpx 0;
  box-sizing: border-box;
  height: 888rpx;
}
.transfer-close {
  width: 36rpx;
  height: 36rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 24rpx;
  top: 24rpx;
}

.transfer-title {
  height: 50rpx;
  font-size: 36rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 50rpx;
  font-weight: bold;
  text-align: center;
  border-bottom: 1rpx solid #eeeeee;
  padding: 24rpx;
  margin-bottom: 24rpx;
}

.transfer-content .li {
  width: 702rpx;
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  color: #333333;
  line-height: 42rpx;
  letter-spacing: 1px;
  margin-bottom: 40rpx;
}

.transfer-notice {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  color: #1677ff;
  line-height: 42rpx;
  letter-spacing: 2px;
  margin-top: 24rpx;
  margin-left: 24rpx;
}

.transfer-btn {
  margin-top: 100rpx;
  margin-bottom: 24rpx;
}

/* 借条用户使用通知 */
</style>
